<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 元素样式操作： 直接操作元素的css和属性值
			css()			功能：
					1个参：传入css属性名
					功能：获取匹配元素集合中第一个元素css的属性值
					2个参：设置参数
					n个参：传入多个属性和属性值
						语法糖：css({"属性名"：“属性值”,
									"属性名":"属性值"})
			width()  功能：匹配集合第一个元素宽高度
					无参：获取集合第一个元素宽高度
					有参：设置集合第一个元素宽高度
					width(40)
			height()
			outerWidth()
			outerHeight() 出现原因：盒子模型，宽高计算方式：内外边距+边框+内容
					无参：获取元素的宽高度，计算盒子模型：内外边距+边框
					有参：传入：boolrean值，true，计算盒子模型：内外编剧+边框
		 -->
	</head>
	<style>
		.box{
			background: #cbc9ff;
			margin: 20px;
			padding: 20px;
			border: 5px black solid;
		}
		.result{
			margin-top: 10px;
			font-weight: bold;
			
		}
	</style>
	<body>
		<!-- css: .box添加样式：背景颜色,内外边距：20px，
			边框5px，
			.result:上外边距:10px，字体加粗
		 -->
		<!-- 2个div 6个button-->
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorBtn">获取颜色属性值</button>
		<button id="setColorBtn">设置颜色效果</button>
		<button id="setBtn">设置多参</button>
		<button id="gsbtn">获取元素and设置元素高宽</button>
		<button id="bpBtn">获取高度（内外边距加边框）</button>
		<button id="bpmBtn">内外边距加边框</button>
		<!-- 2.结果提示功能区域 -->
		<div class="result" id="result"></div>
		
		<script>
			/* 点击 获取颜色属性值，并且打印在页面上 */
			$("#getColorBtn").click(function(){
				$(".result").text($(".box").css("background-color"))
			})
			/* 传两个参数 */
			$("#setColorBtn").click(function(){
				$(".box").css("background-color","antiquewhite")
				$(".result").text()
			})
			/* 多参 */
			$("#setBtn").click(function(){
				$(".box").css({
					"background-color":"yellow",
					"width":"300px",
					"height":"300px",
					"border-radius":"300px",
					"box-shadow":"0 0 5px 5px #424242",
					"border":"5px solid #ff0"
				})
			})
			/* width height */
			$("#gsbtn").click(function(){
				var W=$(".box").width();
				$(".result").text(W)
			})
			/* 点击获取高度，计算box宽高 */
			$("#bpBtn").click(function(){
				var bp=$(".box").outerHeight();
				$(".result").text(bp)
			})
			/*  */
			$("#bpmBtn").click(function(){
				var bp=$(".box").outerHeight(true);
				$(".result").text(bp)
			})
		</script>
	</body>
</html>